/*
    受控组件
    使用受控组件，来实现双向绑定的效果
    类似：vue中v-model ，:value，@input
    总结：什么是受控组件？
    1、表单元素
    2、由state控制值
    3、由setState来改变值
*/

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';
class Handler extends React.Component {
  state = {
    msg: 'Hello React',
  };
  handleChange = (e) => {
    console.log('handleChange----->', e.target.value);
    this.setState({
      msg: e.target.value,
    });
  };
  render() {
    return (
      <div>
        {/* 表单元素的值，由state控制 */}
        {/* onChange配合setState修改state的值 */}
        {/* onChange监听输入框的值 */}
        {/* 推荐使用onChange事件来监听用户输入，不推荐使用onInput */}
        {/* blur失去焦点的时候触发 */}
        <input
          type="text"
          value={this.state.msg}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}
// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
